<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过canvas绘制矩形（圆角矩形）</title>
</head>
<body>
    <canvas id="oCanvas" width="500" height="500" style="border:2px solid gray"></canvas>
</body>
<script>
    //获取canvas对象
    var canvas = document.getElementById("oCanvas");
    //获取画布对象
    var ctx = canvas.getContext('2d');
    //1.新建一条路径
    ctx.beginPath();
    //2.绘制矩形

    //2.1 设置样式、(样式必须在填充矩形之前)
    //     填充矩形
    ctx.fillStyle='#0ff';
    ctx.fillRect(50,20,100,90);


      
    //2.2 描边矩形
    // 设置样式
    ctx.strokeStyle="#f0f";
    ctx.strokeRect(200, 20, 60, 50);

      
    //2.3 填充且描边矩形
    // 移动参考点
    ctx.translate(200,200);

    // 矩阵路径
    ctx.lineWidth=5;
    ctx.fillStyle='red';
    ctx.strokeStyle='gray';
    ctx.rect(0,0,200,200);
    ctx.fill();
    ctx.stroke();

    // 清除指定区域，让他完全透明
    ctx.clearRect(20, 20, 20, 20);
      


</script>
</html>